{% extends "backend/backendbase.html" %} 
{% block tittle %}Dashboard{% endblock %} 
{% block dashboard_selected %}class="current"{% endblock %} 
{% block table_content %}
<!--  start table-content  -->
							<div id="table-content"><!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: ''
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: [
							['Books have point less than 10.000', 56],
							['Point less than 15.000', 38],
							{
								name: 'Point greater than 15.000',    
								y: 6,
								sliced: true,
								selected: true
							}
						]
					}]
				});
			});
				
		</script>
		
	</head>
	<body>
		<div id="table-content">
		<form id="mainform" action="">
						<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
						<thead><tr>					
							<th class="table-header-repeat line-left"><a href="">Total Books</a></th>
							<th class="table-header-repeat line-left"><a href="">Total User</a></th>
							<th class="table-header-repeat line-left"><a href="">Total Like</a></th>
							<th class="table-header-repeat line-left"><a href="">Total Book Sold</a></th>
						</tr>				
						</thead>
						<tbody>
							<tr>					
							<td>{{total_book}}</td>
							<td>{{total_user}}</td>
							<td>{{total_like}}</td>
							<td>{{total_sold}}</td>
							</tr>
						</tbody>
						</table>
						<!--  end product-table................................... --> 
		</form>
		</div>
		<!-- 3. Add the container -->
		<h3><div align = "center"></div></h3>
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
				
	</body>
</html>
</div>
		
{% endblock %}
